<template>
  <div class="app-container">
    <!-- 门禁信息明细 -->
    <div>
      <el-form :label-width="labelWidth" :model="searchModel" :inline="true">
        <span>门禁名称：</span>
        <el-input style="width:1.6rem" v-model="searchModel.name" placeholder="请输入门禁名称"></el-input>
        <span class='move-right'>启用状态：</span>
        <el-form-item label="" prop="selectType">
          <el-select v-model="searchModel.selectType" placeholder="全部" style="width: 160px" @change="$forceUpdate()">
            <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-button class="move-right" type="primary" @click="searchLoad">查询
        </el-button>
        <el-button style="margin-left:20px" @click="resetSearch">重置
        </el-button>
      </el-form>
      <el-button style="margin-bottom:20px" type="info" @click="handleDownload">新增
      </el-button>
      <el-table v-loading='listLoading' :data='list' element-loading-text='Loading' border fit highlight-current-row>
        <el-table-column align='center' label='序号'>
          <template slot-scope='scope'>
            {{ scope.$index + 1 + pageSize * (currentPage - 1) }}
          </template>
        </el-table-column>
        <el-table-column label='门禁名称' align='center'>
          <template slot-scope='scope'>
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label='编号' align='center'>
          <template slot-scope='scope'>
            <span>{{ scope.row.accessNo }}</span>
          </template>
        </el-table-column>
        <el-table-column label='方向' align='center'>
          <template slot-scope='scope'>
            <div v-if="scope.row.direction == 1">进场</div>
            <div v-else-if="scope.row.direction == 2">出场</div>
            <div v-else>双向</div>
          </template>
        </el-table-column>
        <el-table-column class-name='status-col' label='状态' align='center'>
          <template slot-scope='scope'>
            <el-tag>{{ scope.row.state == 1 ? "启用" : "禁用" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align='center' prop='created_at' label='创建时间'>
          <template slot-scope='scope'>
            <i class='el-icon-time' />
            <span>{{ scope.row.creationTime }}</span>
          </template>
        </el-table-column>
        <el-table-column align='center' prop='created_at1' label='创建者'>
          <template slot-scope='scope'>
            <span>{{ scope.row.creatorId }}</span>
          </template>
        </el-table-column>
        <el-table-column align='center' prop='created_at2' label='操作' width="300">
          <template slot-scope='scope'>
            <el-button size='mini' @click='handleInspect(scope.$index, scope.row)'>查看</el-button>
            <el-button size='mini' @click='handleEdit(scope.$index, scope.row)'>编辑</el-button>
            <el-button size='mini' type='danger' @click='handleDelete(scope.$index, scope.row)'>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top:15px;">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
          layout="prev, pager,next,sizes,jumper" :total="total">
        </el-pagination>
      </div>
      <!-- :current-page的值表示当前是第几页；
    :page-sizes的值表示可以选择一页多少条；
    :page-size的值表示当前一页显示几条；
    layout的值表示分页需要显示的内容，例如“total” 表示总数、“next” 表示下一页等；
    :total的值表示共几页； -->
    </div>
  </div>
</template>

<script>
import { getApiAccessPageList, deleteApiAccess } from '@/api/Access'
import { parseTime } from '@/utils';

export default {
  data() {
    return {
      input: "",
      listLoading: false,
      searchModel: {
        selectType: "请选择",
      },
      labelWidth: "80px",
      labelHeight: "32px",
      tableData: [],
      count: 0,
      currentPage: 1,
      total: 0,
      pageSize: 10,
      types: [
        {
          value: -1,
          label: '全部'
        }, {
          value: 1,
          label: '启用'
        }, {
          value: 0,
          label: '禁用'
        },],
      list: []
    }
  },
  created() {
    this.getApiList();
  },
  methods: {
    getApiList() {
      let data = {
        skipCount: ((this.currentPage <= 1 ? 1 : this.currentPage) - 1) * this.pageSize,
        MaxResultCount: this.pageSize,
      };
      if (this.searchModel) {
        if (this.searchModel.name != '') {
          data.Name = this.searchModel.name;
        }
        if (this.searchModel.selectType != -1 && this.searchModel.selectType != "请选择") {
          data.State = this.searchModel.selectType;
        }
      }
      getApiAccessPageList(data).then(res => {
        if (res == null) return this.$vux.toast.text(res.message);
        else {
          this.list = res.items;
          this.total = res.totalCount;
          this.list.forEach(element => {
            element.creationTime = parseTime(new Date(element.creationTime), '{y}-{m}-{d} {h}:{i}:{s}');
          });
        }
      });
    },
    handleDelete(v, row) {
      this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteApiAccess(row.id).then(res => {
          this.getApiList();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange(v) {
      this.pageSize = v;
      this.currentPage = 1;
      this.getApiList();
    },
    handleCurrentChange(v) {
      this.currentPage = v;
      this.getApiList();
    },
    searchLoad() {
      this.currentPage = 1;
      this.getApiList();
    },
    handleEdit(index, row) {
      this.$router.push({
        path: "addAccess",
        query: {
          isEditOrInsert: true,
          isEdit: true,
          accessList: row
        }
      });
    },
    handleInspect(index, row) {
      this.$router.push({
        path: "addAccess",
        query: {
          isEditOrInsert: false,
          isEdit: true,
          accessList: row
        }
      });
    },
    resetSearch() {
      this.searchModel = [];
    },
    handleDownload() {
      this.$router.push(
        {
          path: 'addAccess',
          query: {
            isEditOrInsert: true,
          }
        });
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  margin: 0.2rem;
  padding: 0.2rem;
}

.search-bar {
  margin-bottom: .2rem;
  text-align: left;
  // float: left;
  margin-left: 0.8rem;
  margin-top: 0.3rem;
}

.block {
  margin-right: 0.2rem;
  display: flex;
  justify-content: flex-end;
}

.move-right {
  margin-left: 0.5rem;
}
</style>
